<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-25">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/video">视频管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>编辑视频</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form ref="form" :model="form" label-width="80px" class="m-t-10">
            <el-form-item label="视频类型">
                <el-radio-group v-model="style" @change="changeStyle">
                    <el-radio-button label="视频欣赏" value="1"></el-radio-button>
                    <el-radio-button label="视频展示" value="2"></el-radio-button>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="视频分类">
                <el-select ref="type" v-model="form.type" placeholder="请选择分类">
                    <el-option v-for="i in options" :key="i" :label="i.name" :value="i.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="视频名称">
                <el-input ref="title" v-model="form.title" placeholder="请输入视频名称"></el-input>
            </el-form-item>

            <el-form-item label="作者名称">
                <el-input ref="author" v-model="form.author" placeholder="请输入作者名称"></el-input>
            </el-form-item>

            <el-form-item label="作者头像">
                <el-upload :action="uploadImage" :show-file-list="false" :on-success="handleProfileSuccess"
                    :before-upload="beforeImageUpload">
                    <img v-if="profileUrl" :src="profileUrl" class="profile">
                    <el-button v-if="profileUrl" class="reupload" type="warning" icon="el-icon-refresh" size="small">
                        重新上传</el-button>
                    <i v-else class="el-icon-plus profile"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 200 x 200
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="视频简介">
                <el-input ref="digest" v-model="form.digest" placeholder="请输入视频简介"></el-input>
            </el-form-item>

            <el-form-item label="封面图片">
                <el-upload :action="uploadImage" :show-file-list="false" :on-success="handleCoverSuccess"
                    :before-upload="beforeImageUpload">
                    <img v-if="coverUrl" :src="coverUrl" class="cover">
                    <el-button v-if="coverUrl" class="reupload" type="warning" icon="el-icon-refresh" size="small">重新上传
                    </el-button>
                    <i v-else class="el-icon-plus cover"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 750 x 400
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="视频内容">
                <Editor :value="editorValue" @change="changeEditor"></Editor>
            </el-form-item>

            <el-form-item label="视频上传">
                <el-upload :action="uploadVideo" :show-file-list="false" :on-success="handleVideoSuccess"
                    :before-upload="beforeVideoUpload" :on-progress="uploadVideoProcess">
                    <div v-if="form.resource !='' && videoFlag == false">
                        <video :src="form.resource" class="video" controls="controls">您的浏览器不支持视频播放</video>
                        <el-button class="reupload" type="warning" icon="el-icon-refresh" size="small">重新上传</el-button>
                    </div>
                    <i v-else-if="form.resource =='' && videoFlag == false" class="el-icon-plus video"></i>
                    <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent">
                    </el-progress>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 MP4 / MOV / FLV / AVI / WMV / RMVB / MPEG 文件，且不超过 1GB
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="专家解析">
                <div class="flex">
                    <div class="videoList" v-for="(item, index) in masterArr" :key='index'>
                        <video class="mostVideo" controls="controls" :src="item">您的浏览器不支持视频播放</video>
                        <i class="delete" @click="deleteVideo(index)">x</i>
                    </div>
                    <el-upload :action="uploadVideo" :show-file-list="false" :on-success="handleUploadSuccess"
                        :on-progress="uploadMasterProcess" :before-upload="beforeVideoUpload">
                        <span class="warp">
                            <el-progress class="progress" v-if="videoMasterFlag == true" type="circle"
                                :percentage="videoMasterUploadPercent"></el-progress>
                            <i v-else class="el-icon-plus master"></i>
                        </span>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传 MP4 / MOV / FLV / AVI / WMV / RMVB / MPEG 文件，且不超过 1GB
                            </div>
                        </template>
                    </el-upload>
                </div>
            </el-form-item>

            <el-form-item>
                <div v-if="uploading">
                    <el-button type="success" @click="submit" disabled>添加</el-button>
                    <el-button type="danger" @click="cancel" disabled>取消</el-button>
                    <span class="upload-tip">如按钮无法点击，说明文件正在上传中，请等待上传完毕后点击即可</span>
                </div>
                <div v-else>
                    <el-button type="success" @click="submit">添加</el-button>
                    <el-button type="danger" @click="cancel">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        get,
        put
    } from '@/network/request'
    import Editor from '@/components/Editor'
    import {
        __IMAGE__,
        __VIDEO__
    } from '@/main'

    export default {
        name: 'EditVideo',
        components: {
            Editor
        },
        data() {
            return {
                uploadImage: '',
                uploadVideo: '',
                style: '视频欣赏',
                styleValue: 1,
                options: [],
                form: {
                    id: this.$route.params.id,
                    type: '',
                    title: '',
                    author: '',
                    profile: '',
                    cover: '',
                    digest: '',
                    content: '',
                    resource: ''
                },
                editorValue: '',
                profileUrl: '',
                coverUrl: '',
                videoFlag: false,
                videoUploadPercent: 0,
                videoMasterFlag: false,
                videoMasterUploadPercent: 0,
                masterArr: [],
                uploading: false
            }
        },
        created() {
            this.uploadImage = __IMAGE__
            this.uploadVideo = __VIDEO__
        },
        mounted() {
            get('/editVideo', {
                id: this.$route.params.id
            }).then(res => {
                const result = res.data
                if (result.code == 200) {
                    this.styleValue = result.data.style
                    if (this.styleValue == 1) {
                        this.style = '视频欣赏'
                    } else {
                        this.style = '视频展示'
                    }

                    const data = result.data.data
                    this.form.type = data.type
                    this.form.title = data.title
                    this.form.author = data.author
                    this.form.digest = data.digest
                    this.form.profile = this.profileUrl = data.profile
                    this.form.cover = this.coverUrl = data.cover
                    this.form.resource = data.resource
                    this.editorValue = data.content
                    if (data.master != '') {
                        this.masterArr = data.master.split(',')
                    }

                    get('/getType', {
                        id: this.styleValue
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.options = result.data
                        }
                    }).catch()
                }
            }).catch()
        },
        methods: {
            changeEditor(val) {
                this.form.content = val
            },
            changeStyle(value) {
                this.form.type = ''
                if (value == '视频欣赏') {
                    this.styleValue = 1
                } else {
                    this.styleValue = 2
                }
                get('/getType', {
                    id: this.styleValue
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.options = result.data
                    }
                }).catch()
            },
            submit() {
                if (this.form.type == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请选择视频分类',
                        offset: 60
                    })
                    this.$refs['type'].focus()
                    return false
                }
                if (this.form.title == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入视频标题',
                        offset: 60
                    })
                    this.$refs['title'].focus()
                    return false
                }
                if (this.form.author == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入视频作者',
                        offset: 60
                    })
                    this.$refs['author'].focus()
                    return false
                }
                if (this.form.profile == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传作者头像',
                        offset: 60
                    })
                    return false
                }
                if (this.form.digest == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入视频简介',
                        offset: 60
                    })
                    this.$refs['digest'].focus()
                    return false
                }
                if (this.form.cover == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传封面头像',
                        offset: 60
                    })
                    return false
                }
                if (this.form.content == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入视频内容详情',
                        offset: 60
                    })
                    return false
                }
                if (this.form.resource == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传视频资源',
                        offset: 60
                    })
                    return false
                }
                this.form.master = this.masterArr.toString()
                put('/modifyVideo', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '修改视频成功',
                            offset: 60
                        })
                        this.$router.push('/video')
                    }
                }).catch()
            },
            cancel() {
                this.$router.push('/video')
            },
            handleProfileSuccess(res, file) {
                this.form.profile = res.data
                this.profileUrl = URL.createObjectURL(file.raw)
            },
            handleCoverSuccess(res, file) {
                this.form.cover = res.data
                this.coverUrl = URL.createObjectURL(file.raw)
            },
            beforeImageUpload(file) {
                if (['image/jpeg', 'image/bmp', 'image/png', 'image/webp'].indexOf(file
                        .type) == -1) {
                    this.$message.error({
                        message: '请上传正确的图片格式！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }

                const size = file.size / 1024 / 1024 < 2
                if (!size) {
                    this.$message.error({
                        message: '图片大小不能超过 2MB！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
            },
            beforeVideoUpload(file) {
                if (['video/mp4', 'video/quicktime', 'video/mpeg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb']
                    .indexOf(file.type) == -1) {
                    this.$message.error({
                        message: '请上传正确的视频格式！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
                const size = file.size / 1024 / 1024 < 1024
                if (!size) {
                    this.$message.error({
                        message: '视频大小不能超过 1GB！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
            },
            uploadVideoProcess(event) {
                this.videoFlag = true
                this.videoUploadPercent = Math.floor(event.percent)
                this.uploading = true
            },
            handleVideoSuccess(res) {
                this.videoFlag = false
                this.videoUploadPercent = 0
                if (res.code == 200) {
                    this.form.resource = res.data
                } else {
                    this.$message.error({
                        message: '视频上传失败，请重新上传！',
                        type: 'error',
                        offset: 80
                    })
                }
                this.uploading = false
            },
            deleteVideo(index) {
                this.masterArr.splice(index, 1)
            },
            uploadMasterProcess(event) {
                this.videoMasterFlag = true
                this.videoMasterUploadPercent = Math.floor(event.percent)
                this.uploading = true
            },
            handleUploadSuccess(res) {
                this.videoMasterFlag = false
                this.videoMasterUploadPercent = 0
                if (res.code == 200) {
                    this.masterArr.push(res.data)
                } else {
                    this.$message.error({
                        message: '视频上传失败，请重新上传！',
                        type: 'error',
                        offset: 80
                    })
                }
                this.uploading = false
            }
        }
    }
</script>

<style scoped>

</style>